<template>
	<view class="nav">
		<view :style="'height:'+status+'rpx;'+containerStyle"></view>
		<view class="navbar" :style="'height:'+navHeight+'rpx;'+containerStyle" style="border-bottom: 1rpx solid #373737;">
			<view class="back-icon" @click="back">
				<!-- <uni-icons v-if="pages>1" class="left" type="left" size="30"></uni-icons> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onBeforeMount,
		onUnmounted,
		onBeforeUnmount
	} from 'vue'
	import {
		defineProps,
		defineEmits
	} from 'vue'

	const emits = defineEmits(['updateHeight']);

	// Emit height after mounting
	onMounted(() => {
		emits('updateHeight', status.value + navHeight.value);
	});


	//定义属性
	const props = defineProps({
		backgroung: {
			type: String,
			// default: '#f0f0f0',
			default: '#cff0c8',
		},
		color: {
			type: String,
			default: 'rgba(0,0,0,1)'
		},
		fontSize: {
			type: String,
			default: '32'
		},
		iconWidth: {
			type: String,
			default: '116'
		},
		iconHeight: {
			type: String,
			default: '38'
		},
	})

	//获取状态栏高度
	onBeforeMount(() => {
		setNavSize()
		setStyle()
	})

	//计算状态栏高度
	const status = ref(0)

	//计算内容高度
	const navHeight = ref(0)

	//背景颜色
	const containerStyle = ref('')

	//字体样式
	const textStyle = ref('')

	//图标样式
	const iconStyle = ref('')

	//页面栈的数量
	const pages = ref(getCurrentPages().length)

	//返回按钮
	const back = () => {
		if (pages.value > 1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}

	//计算状态栏高度
	const setNavSize = () => {
		const {
			system,
			statusBarHeight
		} = uni.getSystemInfoSync()
		status.value = statusBarHeight * 2 //系统为px，换算成rpx
		const isiOS = system.indexOf('iOS') > -1
		if (!isiOS) {
			navHeight.value = 96
		} else {
			navHeight.value = 88
		}
	}

	//样式设置
	const setStyle = () => {
		containerStyle.value = `background-color:${props.backgroung}`
		textStyle.value = `color:${props.color};font-size:${props.fontSize}rpx`
		iconStyle.value = `width:${props.iconWidth}rpx;height:${props.iconHeight}rpx`
	}
</script>

<style scoped>
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100rpx;
		/* border-bottom: 5px solid #e5e5e5; */
	}

	.navbar {
		color: whitesmoke;
	}

	.left {
		position: absolute;
		left: 20rpx;
	}
</style>